<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scale">
    <title>列表组面板和嵌入组件</title>
    <link rel="stylesheet" href="css/bootstrap.min.css"/>
    <script src="js/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <style>

    </style>
</head>
<body style="margin:100px;">
<!--列表组 组件-->
<!--

<ul class="list-group">
    <li class="list-group-item">1.这是首页</li>
    <li class="list-group-item">2.这是第二页 <span class="badge">10 </span></li>
    <li class="list-group-item">3.这是第三页</li>
    <li class="list-group-item">4.这是第四页</li>
</ul>

<div class="list-group">    这样设置超链接 更好
    <a href="" class="list-group-item">1.这是首页</a>
    <a href="" class="list-group-item">2.这是第二页 <span class="badge">10 </span></a>
    <a href="" class="list-group-item disabled">3.这是第三页</a>
    <a href="" class="list-group-item list-group-item-success">4.这是第四页</a>
</div>

<div class="list-group">
    <button class="list-group-item">1.这是首页</button>
    <button class="list-group-item active">2.这是第二页 <span class="badge">10 </span></button>
    <button class="list-group-item">3.这是第三页</button>
    <button class="list-group-item">4.这是第四页</button>
</div>

<div class="list-group">
    <a href="" class="list-group-item">
        <h4>列表标题</h4>
        <p>详细内容。。。</p>
    </a>
    <a href="" class="list-group-item">2.这是第二页 <span class="badge">10 </span></a>
    <a href="" class="list-group-item disabled">3.这是第三页</a>
    <a href="" class="list-group-item list-group-item-success">4.这是第四页</a>
</div>
-->


<!--面板组件-->
<div class="panel panel-danger">
    <div class="panel-heading">
       <h3 class="panel-title">我是标题区域</h3>
    </div>
    <div class="panel-body">
        我是一个面板容器
    </div>
    <table class="table">
        <tr>
            <th>1</th>
            <th>2</th>
            <th>3</th>
        </tr>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
        </tr>
    </table>
    <ul class="list-group">
        <li class="list-group-item">1.这是首页</li>
        <li class="list-group-item">2.这是第二页 <span class="badge">10 </span></li>
        <li class="list-group-item">3.这是第三页</li>
        <li class="list-group-item">4.这是第四页</li>
    </ul>
    <div class="panel-footer">
        我是底部
    </div>
</div>





</body>
</html>